<template>
  <div>
    <van-nav-bar
      v-if="!$route.meta.hideNavBar"
      :title="$route.meta.title"
      @click-left="onClickBack"
      @click-right="onClickRight"
    >
      <div slot="left">
        <span v-if="!$route.meta.left">
          <i class="fa fa-angle-left fa-lg" aria-hidden="true"></i>
          返回
        </span>
        <span v-if="$route.meta.left == 'home'">主页</span>
      </div>
      <div slot="right">
        <i
          v-if="!$route.meta.right"
          class="fa fa-user-circle fa-lg"
          aria-hidden="true"
        ></i>
        <i
          v-else-if="$route.meta.right == 'shop-center'"
          class="fa fa-cog fa-lg"
          aria-hidden="true"
        ></i>
        <i
          v-else-if="$route.meta.right == 'edit'"
          class="fa fa-pencil-square-o"
          aria-hidden="true"
        ></i>
      </div>
    </van-nav-bar>
  </div>
</template>

<script>
import { NavBar } from "vant"

export default {
  components: {
    [NavBar.name]: NavBar
  },
  methods: {
    onClickBack() {
      this.$store.commit("SET_TRANSITION", "right")
      if (!this.$route.meta.leftTo) this.$router.go(-1)
      // 返回上一页
      else if (this.$route.meta.leftTo == "home")
        this.$router.replace({ name: "home" })
      else this.$router.push(this.$route.meta.leftTo)
    },
    onClickRight() {
      this.$store.commit("SET_TRANSITION", "left")
      if (this.$store.state.shop_token)
        this.$router.push({ name: this.$route.meta.rightTo || "shopArrange" })
      else this.$router.push({ name: this.$route.meta.rightTo || "userCenter" })
    }
  }
}
</script>
